<template>
  <div class="common-tab">
    <ul>
      <li v-for="item in list" :key="item.code" :class="{active: item.active}" @click="selectTabItem(item)">{{ item.text }}<span class="params" v-if="item.params"> ({{ item.params }})</span></li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => []
    }
  },

  data () {
    return {
      list: []
    }
  },

  created () {
    // 赋值
    this.list = this.tabs.map((item, index) => {
      item.active = false
      if (index === 0) {
        item.active = true
      }
      return item
    })
  },

  methods: {
    /**
     * 选中tab的项
     * @param { Object } item 当前点击的tab
     */
    selectTabItem (item) {
      // 取消所有的激活状态
      this.list.forEach((tab, index) => {
        // 默认设置为false
        this.list[index].active = false
        // 如果当前是点击的tab，则显示激活状态
        if (tab.code === item.code) {
          this.list[index].active = true
        }
        this.$set(this.list, index, this.list[index])
      })
      // tab切换
      this.$emit('tabChange', item)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../styles/variable.less';

.common-tab {
  ul {
    background: @bg-grey;
    border-top: 1px solid @border-color2;
    border-left: 1px solid @border-color2;
    border-right: 1px solid @border-color2;
    overflow: hidden;
    li {
      align-items: center;
      background: @bg-grey;
      border-bottom: 1px solid @border-color2;
      border-right: 1px solid @border-color2;
      cursor: pointer;
      display: flex;
      font-size: 14px;
      float: left;
      padding-top: 2px;
      padding-bottom: 3px;
      width: 125px;
      height: 42px;
      justify-content: center;
      .params {
        color: @font-color-golden;
      }
      &:first-child {
        width: 124px;
      }
      &.active {
        background: #ffffff;
        padding-top: 0px;
        border-top: 3px solid @font-color-golden;
        border-bottom: 1px solid transparent;
      }
    }
  }
}
</style>
